<script setup lang="ts">
import { ref } from 'vue'
import { HelpFilled, Document, Plus } from '@element-plus/icons-vue'
import { genFileId, type UploadInstance, type UploadProps, type UploadRawFile } from 'element-plus'
import scoreList from '../../components/Content/scoreList.vue'
// import { TFiles, TScore } from '../../Types/files'
// import XLSX from 'xlsx'
import * as XLSX from 'xlsx' // 导入 xlsx 模块

// 初始化
const uploadRef = ref<UploadInstance>()
const menuShow = ref(true)

// 菜单内容展示
// // 成绩管理
// const scoreManageMenu = () => {
// 	menuShow.value = true
// }
// 成绩列表
const scoreListMenu = () => {
	menuShow.value = false
}

// 替换上传的文件
const handleExceed: UploadProps['onExceed'] = (files) => {
	uploadRef.value!.clearFiles()
	const file = files[0] as UploadRawFile
	file.uid = genFileId()
	uploadRef.value!.handleStart(file)
}

// // 读取上传的文件
// const uploadUploadChange = (file: TFiles) => {
// 	// console.log(file)
// 	// console.log(uploadRef.value)

// 	// 创建一个新的 FileReader 对象。
// 	const reader = new FileReader()
// 	// 文件读取完成后触发该函数
// 	reader.onload = () => {
// 		// 读取到的文件内容
// 		const fileData = reader.result
// 		// console.log(fileData)

// 		// 使用 xlsx 库的 read 方法来读取文件内容。  data：即读取到的文件内容。  { type: 'array' }：表示以数组的形式读取文件内容。
// 		const workbook = XLSX.read(fileData, { type: 'array' })
// 		// 获取工作簿中的第一个工作表的名称。假设 Excel 文件只有一个工作表，这里取第一个工作表进行处理。
// 		const sheetName = workbook.SheetNames[0]
// 		// 根据工作表名称获取对应的工作表对象。
// 		const sheet = workbook.Sheets[sheetName]
// 		// 使用 xlsx 库的 utils.sheet_to_json 方法将工作表转换为 JSON 格式的数据。这个方法会根据工作表中的数据结构自动解析并转换为 JSON 对象数组。
// 		const excelData: { [key: string]: any }[] = XLSX.utils.sheet_to_json(sheet)
// 		console.log('excel数据：', excelData)

// 		// 数据一：学校名、学年、学期、阶段、学历、类型
// 		// console.log(excelData[0])
// 		const result1 = [
// 			{
// 				university: '',
// 				degree: '',
// 				academic_year: '',
// 				semester: '',
// 				stage: ''
// 			}
// 		]
// 		// 转化为数组
// 		const [uni, acd] = Object.entries(excelData[0])[0]
// 		// console.log(uni, acd)

// 		result1[0].university = uni // 学校
// 		const academicPart = acd.split('学年') // 以学年进行分割
// 		result1[0].academic_year = academicPart[0] // 学年
// 		const semesterPart = academicPart[1].split('学期')
// 		result1[0].semester = semesterPart[0] // 学期
// 		result1[0].stage = academicPart[1].split('学期')[1].split('本科')[0] // 类型
// 		result1[0].degree = academicPart[1].split('学期')[1].split('期末')[1].split('生')[0]
// 		console.log('固定数据：', result1)

// 		// 数据二：学院、专业、班级、辅导员
// 		// console.log(excelData[1])
// 		const result2 = [
// 			{
// 				academy: '',
// 				profession: '',
// 				class: 0,
// 				counselor: ''
// 			}
// 		]
// 		// console.log(excelData[1].西安信息职业大学)
// 		result2[0].academy = excelData[1].西安信息职业大学.split('：')[1]
// 		result2[0].profession = excelData[1].__EMPTY_3
// 		result2[0].class = excelData[1].__EMPTY_5
// 		result2[0].counselor = excelData[1].__EMPTY_8
// 		console.log('学院数据：', result2)

// 		// 数据三：序号、学号、科目
// 		// console.log(excelData[2])
// 		// const result3: string[] = []
// 		// // result3.push(excelData[2].__EMPTY_2)
// 		// for (let i = 2; i <= 20; i++) {
// 		// 	const subjectData = excelData[2][`__EMPTY_${i}`]
// 		// 	if (subjectData !== undefined) {
// 		// 		result3.push(subjectData)
// 		// 	}
// 		// }
// 		// console.log(result3)

// 		// // 数据四：考试类型（理论、实践）
// 		// // console.log(excelData[3])
// 		// const result4 = ['理论', '实践']
// 		// console.log(result4)

// 		// 初始化科目数组
// 		const subjectData: { subject: string; exam_type: string }[] = []
// 		// console.log(excelData[2])
// 		// console.log(excelData[3])
// 		// 遍历科目数据
// 		for (const [key, subject] of Object.entries(excelData[2])) {
// 			const num = parseInt(key.slice(8)) // 从键名第8位开始分割，提取数字部分，例如 'a2' -> 2
// 			// console.log(num) //科目对应的数字键名

// 			if (excelData[3][`__EMPTY_${num}`] === '理论') {
// 				subjectData.push({ subject, exam_type: '理论' })
// 				if (excelData[3][`__EMPTY_${num + 1}`] === '实践') {
// 					subjectData.push({ subject, exam_type: '实践' })
// 				}
// 			} else {
// 				subjectData.push({ subject, exam_type: '未知' })
// 			}
// 		}
// 		subjectData.splice(0, 3) // 移除前三个值
// 		console.log('科目数据：', subjectData)

// 		// 数据五：姓名、学号、成绩
// 		// console.log(typeof excelData[4].__EMPTY_1 == 'number')
// 		const unameData: string[] = []
// 		const theoryScore: number | string[] = []
// 		const practiceScore: number | string[] = []

// 		// console.log(excelData.length)
// 		// 获取姓名数据
// 		for (let i = 0; i < excelData.length; i++) {
// 			// console.log(i);

// 			if (excelData[i] && typeof excelData[i].__EMPTY_1 === 'number') {
// 				unameData.push(excelData[i].__EMPTY)
// 			}
// 		}
// 		console.log('姓名数据：', unameData)

// 		// 处理成绩信息
// 		for (let i = 2; i < excelData.length; i++) {
// 			if (excelData[i] && typeof excelData[i].__EMPTY_1 === 'number') {
// 				// unameData.push(excelData[i].__EMPTY)
// 				for (let j = 0; j < Object.keys(excelData[i]).length; j += 2) {
// 					if (j + 1 < Object.keys(excelData[i]).length) {
// 						if (excelData[i][`__EMPTY_${j + 1}`] > 100) {
// 							theoryScore.push('/')
// 						} else {
// 							theoryScore.push(excelData[i][`__EMPTY_${j}`])
// 						}
// 					}
// 					if (j < Object.keys(excelData[i]).length) {
// 						if (excelData[i][`__EMPTY_${j}`] > 100 || excelData[i][`__EMPTY_${j + 1}`] > 100) {
// 							practiceScore.push('/')
// 						} else if (excelData[i][`__EMPTY_${j + 1}`] == undefined) {
// 						} else {
// 							practiceScore.push(excelData[i][`__EMPTY_${j + 1}`])
// 						}
// 					}
// 				}
// 			}
// 		}
// 		// console.log(unameData)
// 		console.log('理论', theoryScore)
// 		console.log('实践：', practiceScore)

// 		// 数据后两条，签名等

// 		// 数据整理
		
// 		// 上传数据
// 		const data: TScore[] = []
// 		console.log(data)
// 	}
// 	// 以 ArrayBuffer 的形式读取上传的文件内容，进行异步处理。完成后触发 onload 事件。
// 	reader.readAsArrayBuffer(file.raw)
// }
</script>

<template>
	<div class="common-layout">
		<el-container>
			<el-aside width="200px">
				<el-menu default-active="manage" mode="vertical">
					<el-menu-item @click="scoreListMenu" index="input">
						<el-icon><Document /></el-icon>
						成绩列表
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main>
				<!-- 成绩管理 -->
				<div class="upload-container" v-if="menuShow">
					<!-- 录入 -->
					<div class="upload-item">
						<h1>录入</h1>
						<div class="upload-component-wrapper">
							<el-upload
								ref="uploadRef"
								:limit="1"
								:on-exceed="handleExceed"
								list-type="picture"
								:auto-upload="false"
								class="upload-component"
							>
								<!-- <img class="avatar" /> -->
								<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
							</el-upload>
							<div class="el-button-group">
								<el-button type="primary">录入</el-button>
								<el-button type="primary">清空</el-button>
							</div>
						</div>
						<div class="upload-tips">
							<p>
								功能：
								<span>1、录入Excel文件，验证数据后，自动录入数据库</span>
								<span>2、</span>
								<span>3、</span>
							</p>
							<p>
								提示：
								<span>1、当前仅支持Excel文件</span>
								<span>2、</span>
							</p>
						</div>
					</div>
					<!-- 导出 -->
					<div class="upload-item">
						<h1>导出</h1>
						<div class="upload-component-wrapper">
							<el-upload
								:limit="1"
								list-type="picture"
								:auto-upload="false"
								class="upload-component"
							>
								<!-- <img class="avatar" /> -->
								<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
							</el-upload>
							<div class="el-button-group">
								<el-button type="primary">生成</el-button>
								<el-button type="primary">清空</el-button>
							</div>
						</div>
						<div class="upload-tips">
							<p>
								功能：
								<span>1、</span>
								<span>2、</span>
								<span>3、</span>
							</p>
							<p>
								提示：
								<span>1、</span>
								<span>2、</span>
							</p>
						</div>
					</div>
				</div>

				<!-- 成绩列表 -->
				<div v-else>
					<scoreList></scoreList>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<style lang="scss" scoped>
// * {
// 	border: 1px solid black;
// }

.common-layout {
	box-sizing: border-box;
	width: 100%;
	height: 94%;

	.el-container {
		border: 1px solid black;
		height: 100%;
	}

	.el-aside {
		border: 1px solid black;
		.el-menu-item {
			border: 1px solid rgb(211, 224, 231);
			width: 100%;
		}
	}

	.el-main {
		display: flex;
		flex-direction: column;
		border: 1px solid black;

		// 文件上传
		.upload-container {
			display: flex;
			// flex-direction: column;
			height: 100%;

			.upload-item {
				flex: 1; // 填充剩余空间
				border: 1px solid rgb(211, 224, 231);
				height: 100%;

				h1 {
					text-align: center;
				}

				.upload-component-wrapper {
					border: 1px solid #c8bfbf;
					.upload-component {
						display: flex;
						flex-direction: column;
						height: 50%;
						border: 3px dashed var(--el-border-color, #e91111); // 使用默认值以防变量未定义
						border-radius: 6px;
						cursor: pointer;
						position: relative;
						overflow: hidden;
						transition: border-color 0.3s; // 假设Element UI的过渡持续时间未定义

						&:hover {
							border-color: #26dddd; // 使用默认值
						}

						:deep(.el-upload--picture) {
							// width: 100%;
							height: 100%;
							// border: 1px solid #26dddd;
						}

						.el-icon.avatar-uploader-icon {
							font-size: 200px;
							color: #cfeed5;
							// text-align: center;
						}
					}
					.el-button-group {
						display: flex;
						justify-content: center;
						.el-button {
							margin: 10px 10px;
						}
					}
				}
			}
		}

		.upload-tips {
			box-sizing: border-box;
			margin-top: 20px;
			padding: 3px;
			border: 1px solid #9c8a99;
			p {
				display: flex;
				flex-direction: column;
				span {
					margin-left: 10px;
				}
			}
		}
	}
}
</style>
